<template>
  <div class="custom_animation--wrap">
    <li v-for="(item, index) in operation" :style="{
      animationDelay: `${(index + 1) * 0.3}s`,
    }" @click="routerToNewPath(item.path)" :key="index">
      <div class="global-flex-center">
        <n-icon :size="20">
          <component :is="item.icon" />
        </n-icon>
        <span class="text">{{ item.title }}</span>
      </div>
      <n-icon :size="20">
        <ChevronForwardOutline />
      </n-icon>
    </li>
  </div>
</template>

<script setup lang='ts' name="SettingList">
import { CreateSharp, ChevronForwardOutline, HomeSharp, Images, Newspaper } from '@vicons/ionicons5';

const router = useRouter();
const operation = [
  {
    title: '回到首页',
    icon: HomeSharp,
    path: '/'
  },
  {
    title: '作者&软件介绍',
    icon: Newspaper,
    path: '/introduction'
  },
  {
    title: '布局整理',
    icon: Images,
    path: '/illuation'
  },
  {
    title: '自定义规则',
    icon: CreateSharp,
    path: '/rule'
  }
];
const routerToNewPath = (path: string) => {
  router.push({
    path
  })
};
</script>
<style scoped lang='scss'>
@keyframes showOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}

.custom_animation--wrap {
  min-height: 100%;

  @include useTheme {
    background: getVar('cardBg');
  }

  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em;
    animation: showOpacity 0.7s ease-in-out forwards;
    opacity: 0;
    color: #777;
    border-bottom: 1px solid rgba(255, 255, 255, 0.68);
    cursor: pointer;

    &:hover {
      background: rgba(255, 255, 255, 0.68);
    }

    span,
    i {
      @include useTheme {
        color: getVar('liText');
      }

      margin:0 0.5em;
    }
  }
}
</style>